{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '示例页面:example/pages/index', '表单示例一'])}
<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
        
          <p>比较常见的布局方式就是：标题放在最上面是为了响应式的环境下有较好的体验，不至于因为宽度不够导致文字换行。</p>
        <p>这里v5和v4有个区别的地方，v5没有了 <code>form-group</code>，所以表单元素的父 <code>div</code>，需要用 <code>mb-3</code> 来保证相邻的div不会叠加在一起。</p>
        <form action="#!" method="post" id="example-from-1">
          <div class="mb-3">
            <label for="nameOne" class="form-label">输入框</label>
            <input type="text" class="form-control" id="nameOne" name="name" value="" placeholder="输入框" />
          </div>
          <div class="mb-3">
            <label for="passwordOne" class="form-label">密码框</label>
            <input type="password" class="form-control" id="passwordOne" name="password" value="" placeholder="密码框" />
            <small class="form-text">密码是用5-20位字符</small>
          </div>
          <div class="mb-3">
            <label for="typeOne" class="form-label">(默认)选择框 - chrome更新后默认的黑色边框巨丑</label>
            <select name="type" class="form-select" id="typeOne">
              <option value="1">小说</option>
              <option value="2">古籍</option>
              <option value="3">专辑</option>
              <option value="4">自传</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="desireOne" class="form-label">(使用插件)选择框</label>
            <div class="form-controls">
              <select class="form-control selectpicker" title="小伙子选择一个吧..." name="desire" id="desireOne">
                <option>吊打海内外的编程技术</option>
                <option>迷倒万千少女的颜值</option>
                <option>马云大大的财富</option>
              </select>
            </div>
          </div>
          <div class="mb-3">
            <label for="exampleSwitchOne" class="form-label">开关</label>
            <div class="form-controls">
              <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" value="1" id="exampleSwitchOne">
                <label class="form-check-label" for="exampleSwitchOne"></label>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label">复选框</label>
            <div class="form-controls">
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="hobbyOne" value="篮球">
                <label class="form-check-label" for="hobbyOne">篮球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="hobbyTwo" value="足球">
                <label class="form-check-label" for="hobbyTwo">足球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="hobbyThree" value="排球">
                <label class="form-check-label" for="hobbyThree">排球</label>
              </div>
            </div>
          </div>
          <div class="mb-3 col-md-12">
            <label class="form-label">单选框</label>
            <div class="form-controls">
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="customRadio" id="loveOne" value="羽毛球">
                <label class="form-check-label" for="loveOne">羽毛球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="customRadio" id="loveTwo" value="冰球">
                <label class="form-check-label" for="loveTwo">冰球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="customRadio" id="loveThree" value="网球">
                <label class="form-check-label" for="loveThree">网球</label>
              </div>
            </div>
          </div>
          <div class="mb-3 col-md-12">
            <label for="descOne" class="form-label">文本域</label>
            <textarea name="descOne" id="desc" placeholder="请输入内容" class="form-control"></textarea>
          </div>
          <div class="col-md-12">
            <button type="submit" class="btn btn-primary">立即提交</button>
            <button type="reset" class="btn btn-default">重 置</button>
          </div>

        </form>
        
        </div>
      </div>
  </div>

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">表单示例二</div>
        </header>
        <div class="card-body">
          
        <p>文字和表单元素在同一行。</p>
        <form action="#!" method="post" id="example-from-2">
          <div class="mb-3 row align-items-center">
            <div class="col-md-2"><label class="col-form-label" for="nameTwo">输入框</label></div>
            <div class="col">
              <input type="text" class="form-control" id="name" name="nameTwo" value="" placeholder="输入框" />
            </div>
          </div>
          <div class="mb-3 row align-items-center">
            <div class="col-md-2"><label class="col-form-label" for="passwordTwo">密码框</label></div>
            <div class="col">
              <input type="password" class="form-control" id="passwordTwo" name="password" value="" placeholder="密码框" />
            </div>
            <div class="col-auto"><small class="form-text">密码是用5-20位字符</small></div>
          </div>
          <div class="mb-3 row align-items-center">
            <label class="col-md-2 col-form-label" for="typeTwo">(默认)选择框</label>
            <div class="col">
              <select name="type" class="form-select" id="typeTwo">
                <option value="1">小说</option>
                <option value="2">古籍</option>
                <option value="3">专辑</option>
                <option value="4">自传</option>
              </select>
            </div>
          </div>
          <div class="mb-3 row align-items-center">
            <label class="col-md-2 col-form-label" for="desireTwo">(使用插件)选择框</label>
            <div class="col">
              <select class="form-control selectpicker" title="小伙子选择一个吧..." name="desire" id="desireTwo">
                <option>吊打海内外的编程技术</option>
                <option>迷倒万千少女的颜值</option>
                <option>马云大大的财富</option>
              </select>
            </div>
          </div>
          <div class="mb-3 row align-items-center">
            <label class="col-md-2 col-form-label" for="idname">开关</label>
            <div class="col">
              <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" value="1" id="exampleSwitchTwo">
                <label class="form-check-label" for="exampleSwitchTwo"></label>
              </div>
            </div>
          </div>
          <div class="mb-3 row align-items-center">
            <label class="col-md-2 col-form-label">复选框</label>
            <div class="col">
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="hobbyFour" value="篮球">
                <label class="form-check-label" for="hobbyFour">篮球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="hobbyFive" value="足球">
                <label class="form-check-label" for="hobbyFive">足球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="hobbySix" value="排球">
                <label class="form-check-label" for="hobbySix">排球</label>
              </div>
            </div>
          </div>
          <div class="mb-3 row align-items-center">
            <label class="col-md-2 col-form-label">单选框</label>
            <div class="col">
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="customRadio" id="loveFour" value="羽毛球">
                <label class="form-check-label" for="loveFour">羽毛球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="customRadio" id="loveFive" value="冰球">
                <label class="form-check-label" for="loveFive">冰球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="customRadio" id="loveSix" value="网球">
                <label class="form-check-label" for="loveSix">网球</label>
              </div>
            </div>
          </div>
          <div class="mb-3 row align-items-center">
            <label class="col-md-2 col-form-label" for="descTwo">文本域</label>
            <div class="col">
              <textarea name="desc" id="descTwo" placeholder="请输入内容" class="form-control"></textarea>
            </div>
          </div>
          <div class="mb-3 row">
            <div class="col offset-md-2">
              <button type="submit" class="btn btn-primary">立即提交</button>
              <button type="reset" class="btn btn-default">重 置</button>
            </div>
          </div>

        </form>
        
        </div>
      </div>
  </div>

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">表单示例三</div>
        </header>
        <div class="card-body">
          
        <p>这个示例跟上一个其实是一样的，有些小伙伴可能不想要这么宽的输入框，这里可以新增样式 <code>mx-w-800</code>，指定最大宽度，让表单居中，你也可以自己定义。</p>
        <form action="#!" method="post" id="example-from-3" class="mx-w-800">
          <div class="mb-3 row align-items-center">
            <div class="col-md-2"><label class="col-form-label" for="nameTwo">输入框</label></div>
            <div class="col">
              <input type="text" class="form-control" id="name" name="nameTwo" value="" placeholder="输入框" />
            </div>
          </div>
          <div class="mb-3 row align-items-center">
            <div class="col-md-2"><label class="col-form-label" for="passwordTwo">密码框</label></div>
            <div class="col">
              <input type="password" class="form-control" id="passwordTwo" name="password" value="" placeholder="密码框" />
            </div>
            <div class="col-auto"><small class="form-text">密码是用5-20位字符</small></div>
          </div>
          <div class="mb-3 row align-items-center">
            <label class="col-md-2 col-form-label" for="typeTwo">(默认)选择框</label>
            <div class="col">
              <select name="type" class="form-select" id="typeTwo">
                <option value="1">小说</option>
                <option value="2">古籍</option>
                <option value="3">专辑</option>
                <option value="4">自传</option>
              </select>
            </div>
          </div>
          <div class="mb-3 row align-items-center">
            <label class="col-md-2 col-form-label" for="desireTwo">(使用插件)选择框</label>
            <div class="col">
              <select class="form-control selectpicker" title="小伙子选择一个吧..." name="desire" id="desireTwo">
                <option>吊打海内外的编程技术</option>
                <option>迷倒万千少女的颜值</option>
                <option>马云大大的财富</option>
              </select>
            </div>
          </div>
          <div class="mb-3 row align-items-center">
            <label class="col-md-2 col-form-label" for="idname">开关</label>
            <div class="col">
              <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" value="1" id="exampleSwitchTwo">
                <label class="form-check-label" for="exampleSwitchTwo"></label>
              </div>
            </div>
          </div>
          <div class="mb-3 row align-items-center">
            <label class="col-md-2 col-form-label">复选框</label>
            <div class="col">
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="hobbyFour" value="篮球">
                <label class="form-check-label" for="hobbyFour">篮球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="hobbyFive" value="足球">
                <label class="form-check-label" for="hobbyFive">足球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="hobbySix" value="排球">
                <label class="form-check-label" for="hobbySix">排球</label>
              </div>
            </div>
          </div>
          <div class="mb-3 row align-items-center">
            <label class="col-md-2 col-form-label">单选框</label>
            <div class="col">
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="customRadio" id="loveFour" value="羽毛球">
                <label class="form-check-label" for="loveFour">羽毛球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="customRadio" id="loveFive" value="冰球">
                <label class="form-check-label" for="loveFive">冰球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="customRadio" id="loveSix" value="网球">
                <label class="form-check-label" for="loveSix">网球</label>
              </div>
            </div>
          </div>
          <div class="mb-3 row align-items-center">
            <label class="col-md-2 col-form-label" for="descTwo">文本域</label>
            <div class="col">
              <textarea name="desc" id="descTwo" placeholder="请输入内容" class="form-control"></textarea>
            </div>
          </div>
          <div class="mb-3 row">
            <div class="col offset-md-2">
              <button type="submit" class="btn btn-primary">立即提交</button>
              <button type="reset" class="btn btn-default">重 置</button>
            </div>
          </div>

        </form>
        
        </div>
      </div>
  </div>

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">表单示例四</div>
        </header>
        <div class="card-body">
          
        <p>使用 <code>input-group</code> 布局。</p>
        <p>这种布局也有局限性，右侧高度固定，如果是复选和单选，手机下可能会错位</p>
        <form action="#!" method="post" id="example-from-4">
          <div class="input-group mb-3">
            <span class="input-group-text">输入框</span>
            <input type="text" class="form-control" id="name" name="name" value="" placeholder="输入框" />
          </div>
          <div class="mb-3">
            <div class="input-group">
              <span class="input-group-text">密码框</span>
              <input type="password" class="form-control" id="password" name="password" value="" placeholder="密码框" />
            </div>
            <small class="form-txt">密码是用5-20位字符</small>
          </div>
          <div class="input-group mb-3">
            <span class="input-group-text">选择框</span>
            <select name="type" class="form-select" id="type">
              <option value="1">小说</option>
              <option value="2">古籍</option>
              <option value="3">专辑</option>
              <option value="4">自传</option>
            </select>
          </div>
          <div class="input-group mb-3">
            <span class="input-group-text">选择框</span>
            <select class="form-control selectpicker" title="小伙子选择一个吧..." name="example-6" id="example">
              <option>吊打海内外的编程技术</option>
              <option>迷倒万千少女的颜值</option>
              <option>马云大大的财富</option>
            </select>
          </div>
          <div class="input-group mb-3">
            <span class="input-group-text">开&nbsp;&nbsp;&nbsp;&nbsp;关</span>
            <div class="input-group-controls pt-1">
              <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input" value="1" id="exampleSwitchTwo">
                <label class="form-check-label" for="exampleSwitchTwo"></label>
              </div>
            </div>
          </div>
          <div class="input-group mb-3">
            <span class="input-group-text">复选框</span>
            <div class="input-group-controls pt-1">
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="hobbyFour" value="篮球">
                <label class="form-check-label" for="hobbyFour">篮球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="hobbyFive" value="足球">
                <label class="form-check-label" for="hobbyFive">足球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" class="form-check-input" id="hobbySix" value="排球">
                <label class="form-check-label" for="hobbySix">排球</label>
              </div>
            </div>
          </div>
          <div class="input-group mb-3">
            <span class="input-group-text">单选框</span>
            <div class="input-group-controls pt-1">
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="customRadio" id="loveFour" value="羽毛球">
                <label class="form-check-label" for="loveFour">羽毛球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="customRadio" id="loveFive" value="冰球">
                <label class="form-check-label" for="loveFive">冰球</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="radio" class="form-check-input" name="customRadio" id="loveSix" value="网球">
                <label class="form-check-label" for="loveSix">网球</label>
              </div>
            </div>
          </div>
          <div class="input-group mb-3">
            <span class="input-group-text">文本域</span>
            <textarea name="desc" id="desc" placeholder="请输入内容" class="form-control"></textarea>
          </div>
          <div>
            <button type="submit" class="btn btn-primary">立即提交</button>
            <button type="reset" class="btn btn-default">重 置</button>
          </div>

        </form>
        
        </div>
      </div>
  </div>

</div>